<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会议管理 - OA办公系统</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body class="bg-gray-50 h-screen overflow-auto p-6">
    <div class="container mx-auto fade-in">
        <!-- 页面标题 -->
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800">会议管理</h1>
            <div class="flex space-x-2">
                <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center btn-hover-effect">
                    <i class="fas fa-plus mr-2"></i>
                    <span>预约会议</span>
                </button>
                <button class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 flex items-center btn-hover-effect">
                    <i class="fas fa-video mr-2"></i>
                    <span>发起视频会议</span>
                </button>
                <div class="relative">
                    <input type="text" placeholder="搜索会议" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
                </div>
            </div>
        </div>

        <!-- 会议分类标签 -->
        <div class="bg-white rounded-lg shadow mb-6">
            <div class="flex border-b overflow-x-auto">
                <button class="px-6 py-3 text-blue-500 border-b-2 border-blue-500 font-medium">我的会议</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">我组织的</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">待参加</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">已结束</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">会议室管理</button>
            </div>
        </div>

        <!-- 日期筛选 -->
        <div class="bg-white rounded-lg shadow p-4 mb-6">
            <div class="flex flex-wrap items-center justify-between">
                <div class="flex items-center space-x-4">
                    <div class="flex items-center">
                        <span class="text-gray-500 mr-2">日期范围:</span>
                        <input type="date" value="2023-06-15" class="border border-gray-300 rounded px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <span class="mx-2">至</span>
                        <input type="date" value="2023-06-22" class="border border-gray-300 rounded px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="flex items-center">
                        <span class="text-gray-500 mr-2">会议类型:</span>
                        <select class="border border-gray-300 rounded px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option>全部</option>
                            <option>部门会议</option>
                            <option>项目会议</option>
                            <option>客户会议</option>
                            <option>培训会议</option>
                        </select>
                    </div>
                </div>
                <div class="flex items-center space-x-2">
                    <button class="px-4 py-1 bg-blue-100 text-blue-600 rounded hover:bg-blue-200">
                        <i class="fas fa-filter mr-1"></i>
                        筛选
                    </button>
                    <button class="px-4 py-1 text-gray-500 hover:text-blue-500">
                        <i class="fas fa-redo-alt mr-1"></i>
                        重置
                    </button>
                </div>
            </div>
        </div>

        <!-- 今日会议 -->
        <div class="mb-6">
            <h2 class="text-lg font-semibold text-gray-800 mb-4">今日会议</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- 会议卡片1 -->
                <div class="bg-white rounded-lg shadow hover:shadow-md transition-shadow p-4 card-hover">
                    <div class="flex items-center mb-3">
                        <div class="h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-users text-blue-500"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-medium text-gray-800">市场部周会</h3>
                            <p class="text-xs text-gray-500">部门会议</p>
                        </div>
                        <div class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">
                            30分钟后
                        </div>
                    </div>
                    <div class="border-t pt-3">
                        <div class="flex items-center text-sm text-gray-600 mb-2">
                            <i class="fas fa-clock w-5 text-gray-400"></i>
                            <span>09:30 - 10:30 (1小时)</span>
                        </div>
                        <div class="flex items-center text-sm text-gray-600 mb-2">
                            <i class="fas fa-map-marker-alt w-5 text-gray-400"></i>
                            <span>会议室A (3楼)</span>
                        </div>
                        <div class="flex items-center text-sm text-gray-600">
                            <i class="fas fa-user w-5 text-gray-400"></i>
                            <span>组织者: 王总监</span>
                        </div>
                    </div>
                    <div class="flex justify-between mt-4">
                        <div class="flex -space-x-2">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="参会人" class="h-6 w-6 rounded-full border border-white">
                            <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="参会人" class="h-6 w-6 rounded-full border border-white">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="参会人" class="h-6 w-6 rounded-full border border-white">
                            <div class="h-6 w-6 rounded-full bg-gray-200 flex items-center justify-center text-xs text-gray-500 border border-white">+3</div>
                        </div>
                        <div class="flex space-x-2">
                            <button class="p-1 text-blue-500 hover:bg-blue-50 rounded">
                                <i class="fas fa-file-alt"></i>
                            </button>
                            <button class="p-1 text-green-500 hover:bg-green-50 rounded">
                                <i class="fas fa-check"></i>
                            </button>
                            <button class="p-1 text-red-500 hover:bg-red-50 rounded">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 会议卡片2 -->
                <div class="bg-white rounded-lg shadow hover:shadow-md transition-shadow p-4 card-hover">
                    <div class="flex items-center mb-3">
                        <div class="h-10 w-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-project-diagram text-green-500"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-medium text-gray-800">新产品开发讨论</h3>
                            <p class="text-xs text-gray-500">项目会议</p>
                        </div>
                        <div class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">
                            今日 14:00
                        </div>
                    </div>
                    <div class="border-t pt-3">
                        <div class="flex items-center text-sm text-gray-600 mb-2">
                            <i class="fas fa-clock w-5 text-gray-400"></i>
                            <span>14:00 - 15:30 (1.5小时)</span>
                        </div>
                        <div class="flex items-center text-sm text-gray-600 mb-2">
                            <i class="fas fa-map-marker-alt w-5 text-gray-400"></i>
                            <span>会议室B (4楼)</span>
                        </div>
                        <div class="flex items-center text-sm text-gray-600">
                            <i class="fas fa-user w-5 text-gray-400"></i>
                            <span>组织者: 李经理</span>
                        </div>
                    </div>
                    <div class="flex justify-between mt-4">
                        <div class="flex -space-x-2">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="参会人" class="h-6 w-6 rounded-full border border-white">
                            <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="参会人" class="h-6 w-6 rounded-full border border-white">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="参会人" class="h-6 w-6 rounded-full border border-white">
                            <div class="h-6 w-6 rounded-full bg-gray-200 flex items-center justify-center text-xs text-gray-500 border border-white">+5</div>
                        </div>
                        <div class="flex space-x-2">
                            <button class="p-1 text-blue-500 hover:bg-blue-50 rounded">
                                <i class="fas fa-file-alt"></i>
                            </button>
                            <button class="p-1 text-green-500 hover:bg-green-50 rounded">
                                <i class="fas fa-check"></i>
                            </button>
                            <button class="p-1 text-red-500 hover:bg-red-50 rounded">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 会议卡片3 -->
                <div class="bg-white rounded-lg shadow hover:shadow-md transition-shadow p-4 card-hover">
                    <div class="flex items-center mb-3">
                        <div class="h-10 w-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-handshake text-purple-500"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-medium text-gray-800">客户需求沟通</h3>
                            <p class="text-xs text-gray-500">客户会议</p>
                        </div>
                        <div class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">
                            今日 16:30
                        </div>
                    </div>
                    <div class="border-t pt-3">
                        <div class="flex items-center text-sm text-gray-600 mb-2">
                            <i class="fas fa-clock w-5 text-gray-400"></i>
                            <span>16:30 - 17:30 (1小时)</span>
                        </div>
                        <div class="flex items-center text-sm text-gray